<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-30 11:09:53
 * @LastEditTime: 2019-10-03 20:01:20
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <header class="header" v-bind:style="{ height: headerHeight+'px'}">
      <div class="title" v-bind:style="{ height: headerHeight+'px'}">
        <p class="title-text" v-bind:style="{ marginTop: (headerHeight/2)+'px'}">名医工作室</p>
      </div>
    </header>
    <div class="box" v-bind:style="{ marginTop: headerHeight+'px'}">
      <div class="speciality">
        <div class="speciality-head">
          <div class="speciality-left">
            <!--<img src="" alt="">-->
            <span class="speciality-left-text">专业擅长</span>
          </div>
          <div class="speciality-right">
            <!--<img src="" alt="">-->
            <span class="speciality-right-text">展开</span>
          </div>
        </div>
        <div class="speciality-content">
          <div>
            颅脑肿瘤（如脑膜瘤、胶质瘤、听神经瘤、垂体瘤等），小脑扁桃体下疝畸形伴脊髓空洞，
            颅脑外伤，脊髓疾病（高难度的髓内肿瘤、椎管内外沟通肿瘤），脑积水，脑出血，
            脑寄生虫及枕骨大孔区病变等神经外科疾病的的诊治和手术治疗。
          </div>
        </div>
      </div>
      <div class="speciality">
        <div class="speciality-head">
          <div class="speciality-left">
            <!--<img src="" alt="">-->
            <span class="speciality-left-text">执业经历</span>
          </div>
          <div class="speciality-right">
            <!--<img src="" alt="">-->
            <span class="speciality-right-text">展开</span>
          </div>
        </div>
        <div class="speciality-content">
          <p>
            医学博士，副教授，副主任医师。
            籍贯：温州。1968年生，1991年毕业于复旦大学医学院（原上海医科大学），获医学学士学位，同年分配到华山医院任神经外科医生，
            1996年获医学硕士学位，2001年获医学博士学位。1997年晋升主治，2002年晋升神经外科副主任医师。
            长期从事一线神经外科临床工作，对颅脑肿瘤（如脑膜瘤、胶质瘤、听神经瘤、垂体瘤等），颅脑外伤（术后脑积水和颅骨整形d等），
            脊髓疾病（高难度的髓内肿瘤、椎管内外沟通肿瘤），先天性畸形（蛛网膜囊肿、颅颈交界畸形、
            小脑扁桃体下疝伴脊髓空洞以及脑血管畸形），脑寄生虫，脑积水，脑出血，枕骨大孔区病变等神经外科疾
            病的的诊治和显微外科手术治疗有丰富经验。
          </p>
        </div>
      </div>
      <div class="share">
        <div class="share-left">
          <!--<img src="" alt="">-->
          <span>联系助理</span>
        </div>
        <div class="share-right">
          <!--<img src="" alt="">-->
          <span>分享推荐</span>
          <button open-type="share" class="open-share"></button>
        </div>
      </div>
      <div class="text-banner">
        <div class="animate">刘妙春医生于2019年9月1日应邀在市人民医院开展《老年人如何预防脑血栓》的公益讲座，感兴趣的广大朋友可前往参加。</div>
      </div>
      <div>
        <div class="speciality-head">
          <div class="speciality-left" style="margin-left: 10px;">
            <!--<img src="" alt="">-->
            <span class="speciality-left-text">名医说</span>
          </div>
          <div class="speciality-right"></div>
        </div>
        <div>
          <ul class="list">
            <li class="item" v-for="(item,index) in doctorSay" :key="id" @click="handleLink">
              <div class="item-title">{{item.title}}？</div>
              <div class="item-info">
                <div class="item-time">{{item.titme}}</div>
                <div class="item-info-detall">
                  <span>阅读 {{item.read}}</span>
                  <span class="praise">赞 {{item.praise}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <headers></headers>
    </div>
  </div>
</template>

<script>
// Use Vuex
import store from "./store";
import headers from "@/pages/headers/index.vue";
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      headerHeight: 0,
      Custom: {},
      doctorSay: [
        {
          id: 1,
          title: "发现脑动脉硬化狭窄怎么办？",
          time: "7小时前",
          read: 9,
          praise: 3
        },
        {
          id: 2,
          title: "中风后家中急救措施？",
          time: "7小时前",
          read: 9,
          praise: 3
        },
        {
          id: 3,
          title: "做一次CT的危害有多大？",
          time: "7小时前",
          read: 9,
          praise: 3
        },
        {
          id: 4,
          title: "脑卒中预防？",
          time: "7小时前",
          read: 9,
          praise: 3
        }
      ]
    };
  },
  components: {
    headers
  },
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    },
    handleLink() {
      get("http://www.baidu.com").then(res => console.log(res));
      this.$router.push("../../doctor/article/main");
    }
  },
  mounted() {
    wx.getSystemInfo({
      success: e => {
        let capsule = wx.getMenuButtonBoundingClientRect();
        console.log(capsule);
        console.log(e.statusBarHeight);
        this.Custom = capsule;
        if (capsule.bottom != 0 && capsule.top != 0) {
          console.log(1);
          this.headerHeight = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          console.log(2);
          this.headerHeight = e.statusBarHeight + 50;
        }
      }
    });
  }
};
</script>

<style>
/*.counter-warp {*/
/*text-align: center;*/
/*margin-top: 100px;*/
/*}*/

/*.home {*/
/*display: inline-block;*/
/*margin: 100px auto;*/
/*padding: 5px 10px;*/
/*color: blue;*/
/*border: 1px solid blue;*/
/*}*/
.test {
  width: 100%;
  height: 50px;
  border-radius: 100% 100% 0 0;
  background-color: red;
}
.header {
  background-color: #4a83c3;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.title {
  /*padding-top: 20px;*/
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}

.title-text {
  display: inline-block;
  height: auto;
  /*padding-top: 20px;*/
  box-sizing: padding-box;
}

.speciality {
  padding: 10px;
}

.speciality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.speciality-left {
  width: 162px;
  border-bottom: 1px solid rgba(74, 131, 195, 1);
  padding: 2px 4px;
}

.speciality-left-text {
  color: rgba(74, 131, 195, 1);
  font-size: 14px;
  text-align: left;
}

.speciality-right-text {
  color: rgba(74, 131, 195, 1);
  font-size: 12px;
  text-align: left;
}

.speciality-content {
  padding: 8px 4px;
  font-size: 12px;
  text-align: left;
}

.share {
  width: 330px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(187, 187, 187, 1);
  height: 30px;
}

.share-left,
.share-right {
  text-align: center;
  color: rgba(74, 131, 195, 1);
  font-size: 14px;
  flex-grow: 1;
}

.share-right {
  border-left: 1px solid rgba(187, 187, 187, 1);
  position: relative;
}

.open-share {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.text-banner {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ffffff;
  width: 330px;
  height: 26px;
  line-height: 16px;
  border-radius: 13px;
  background-color: rgba(74, 131, 195, 1);
  text-align: center;
  overflow-x: hidden;
  margin: 15px auto 10px auto;
}

.animate {
  padding-left: 20px;
  display: inline-block;
  white-space: nowrap;
  animation: 20s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

.list {
  margin-top: 10px;
}
.item:nth-child(1) {
  border-top: 1px solid rgba(187, 187, 187, 1);
}
.item {
  border-bottom: 1px solid rgba(187, 187, 187, 1);
  padding: 8px 10px;
}

.item-title {
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: left;
}

.item-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
}

.item-info-detall {
  color: rgba(200, 200, 200, 1);
  font-size: 12px;
  text-align: right;
}

.item-time {
  color: rgba(200, 200, 200, 1);
  font-size: 12px;
  text-align: right;
}

.praise {
  display: inline-block;
  margin-left: 10px;
}
</style>
